@use "styles/Radius.module.scss";
@use "styles/Spacings.module.scss";
@use "styles/Typography.module.scss";

.knowledge_table_wrapper {
  display: flex;
  flex-direction: column;
  gap: Spacings.$spacing05;
  padding-bottom: Spacings.$spacing10;
  border-radius: Radius.$normal;

  .title {
    @include Typography.H2;
  }

  .table_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: Spacings.$spacing03;

    .search {
      width: 250px;
    }
  }

  .first_line {
    display: flex;
    justify-content: space-between;
    padding-left: calc(Spacings.$spacing06);
    padding-right: Spacings.$spacing04;
    padding-block: Spacings.$spacing02;
    font-weight: 500;
    background-color: var(--background-1);
    font-size: Typography.$small;
    border: 1px solid var(--border-0);
    border-radius: Radius.$normal Radius.$normal 0 0;
    border-bottom: none;

    &.empty {
      border: 1px solid var(--border-0);
      border-radius: Radius.$normal;
    }

    .left {
      display: flex;
      align-items: center;
      gap: calc(Spacings.$spacing06 + 6px);

      .name {
        display: flex;
        align-items: center;
        gap: Spacings.$spacing02;
        cursor: pointer;

        .icon {
          visibility: hidden;
        }

        &:hover {
          .icon {
            visibility: visible;
          }
        }
      }
    }

    .right {
      display: flex;
      gap: calc(Spacings.$spacing06 + 12px);

      .status {
        display: flex;
        align-items: center;
        gap: Spacings.$spacing02;
        cursor: pointer;

        .icon {
          visibility: hidden;
        }

        &:hover {
          .icon {
            visibility: visible;
          }
        }
      }
    }
  }
}
